<template>
	<el-card shadow="hover">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="关联商品" prop="goods_id">
				<el-select
					v-model="queryParams.goods_id"
					clearable
					placeholder="请输入关键字或选择商品"
					filterable
					remote
					:remote-method="goodsIdRemoteMethod"
					remote-show-suffix
					:loading="goodsIdSelect.loading"
					@focus="onGoodsIdFocus"
				>
					<el-option v-for="item in goodsIdSelect.options" :key="item.id" :label="item.title" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="订单支付方式" prop="type">
				<el-select v-model="queryParams.type" placeholder="请选择订单支付方式">
					<el-option label="余额支付" value="2" />
					<el-option label="分账支付" value="4" />
				</el-select>
			</el-form-item>
			<el-form-item label="结算时间" prop="time">
				<el-date-picker
					v-model="queryParams.time"
					type="daterange"
					range-separator="~"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					value-format="X"
					:default-time="defaultTime"
				/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mt8 mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain @click="onBatchApplyWithdraw">批量申请提现</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="付款时间" align="center" prop="pay_time" :formatter="formatterPayTime" />
			<el-table-column label="父订单号" align="center" prop="pay_sn" />
			<el-table-column label="子订单号" align="center" prop="order_sn" />
			<el-table-column label="商品名称" align="center" prop="title" />
			<el-table-column label="支付方式" align="center" prop="type" :formatter="formatterType" />
			<el-table-column label="手续费" align="center" prop="procedure_money" />
			<el-table-column label="货款应收金额（含手续费）" align="center" prop="money">
				<template #header> 货款应收金额<br />（含手续费） </template>
			</el-table-column>
			<el-table-column label="货款实收金额" align="center" prop="receipts" />
			<el-table-column label="结算日期" align="center" prop="finish_time" :formatter="formatterFinishTime" />
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<batchApplyWithdrawDialog ref="batchApplyWithdrawDialogRef" />
	</el-card>
</template>

<script>
import { getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { supplier1Api } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

const Supplier1Api = supplier1Api();

import batchApplyWithdrawDialog from './dialog/batchApplyWithdrawDialog.vue';
export default {
	name: 'paymentAccount',
	components: { batchApplyWithdrawDialog },
	data() {
		const { proxy } = getCurrentInstance();
		return {
			showSearch: true,
			queryParams: {
				goods_id: '',
				type: '',
				time: [],
				pageNum: 1,
				pageSize: 10,
			},
			tableList: [],
			loading: false,
			total: 0,
			goodsIdSelect: {
				loading: false,
				options: [],
			},
			defaultTime: [
				new Date(proxy.dayjs().year(), proxy.dayjs().month(), proxy.dayjs().date(), 0, 0, 0),
				new Date(proxy.dayjs().year(), proxy.dayjs().month(), proxy.dayjs().date(), 23, 59, 59),
			],
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/********** 触发事件 **********/
		// 关联商品获取焦点
		onGoodsIdFocus() {
			if (!this.queryParams.goods_id) {
				this._goodsSelect({ pageNum: 1, pageSize: 10 });
			}
		},
		// 搜索
		onQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		// 重置
		onResetQuery() {
			this.$refs.queryFormRef.resetFields();
			this.onQuery();
		},
		// 批量申请提现
		onBatchApplyWithdraw() {
			console.log(this.queryParams);
			if (!this.queryParams.type || !this.queryParams.time.length) {
				return ElMessage.warning('请选择支付方式和结算时间段，再申请提现');
			}
			this.getList();
			this.$refs.batchApplyWithdrawDialogRef.openDialog(
				{
					...this.queryParams,
					start_time: this.queryParams.time ? this.queryParams.time[0] : '',
					end_time: this.queryParams.time ? this.queryParams.time[1] : '',
				},
				() => this.getList()
			);
		},

		/********** 方法事件 **********/
		getList() {
			this.loading = true;
			this._withdrawalOrders({
				...this.queryParams,
				start_time: this.queryParams.time ? this.queryParams.time[0] : '',
				end_time: this.queryParams.time ? this.queryParams.time[1] : '',
			});
		},
		// 关联商品搜索
		goodsIdRemoteMethod(query) {
			if (!query) return;
			this._goodsSelect({ pageNum: 1, pageSize: 10, title: query });
		},
		// 支付方式字典
		formatterType(row) {
			switch (row.type) {
				case 1:
					return '微信支付';
				case 2:
					return '余额支付';
				case 3:
					return '积分支付';
				case 4:
					return '分账支付';
				default:
					return '未知错误';
			}
		},
		// 付款时间字典
		formatterPayTime(row) {
			return timeDictionary(row.pay_time);
		},
		// 结算日期字典
		formatterFinishTime(row) {
			return timeDictionary(row.finish_time);
		},

		/********** 网络请求 **********/
		// 搜索商品
		_goodsSelect(params) {
			this.goodsIdSelect.loading = true;
			Supplier1Api.goodsSelect(params)
				.then((res) => {
					this.goodsIdSelect.options = res.data.list;
					this.goodsIdSelect.loading = false;
				})
				.catch(() => (this.goodsIdSelect.loading = false));
		},
		// 货款提现订单
		_withdrawalOrders(params) {
			Supplier1Api.withdrawalOrders(params)
				.then((res) => {
					this.tableList = res.data.list;
					this.total = res.data.total;
					this.loading = false;
				})
				.catch(() => (this.loading = false));
		},
	},
};
</script>
